JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">click me</a>

<h3>Hey I'm Going to Be Animated</h3>

CSS

@-webkit-keyframes pulse {
	from {
		-webkit-transform: scale(1);
		-webkit-transform-origin: center center;
		-webkit-animation-timing-function: ease-out;
	}
	25% {
		-webkit-transform: scale(1.1);
		-webkit-animation-timing-function: ease-in;
	}
	50% {
		-webkit-transform: scale(1);
		-webkit-animation-timing-function: ease-out;
	}
	74% {
		-webkit-transform: scale(1.05);
		-webkit-animation-timing-function: ease-in;
	}
	to {
		-webkit-transform: scale(1);
		-webkit-animation-timing-function: ease-out;
	}
}

@keyframes pulse {
	from {
		transform: scale(1);
		transform-origin: center center;
		animation-timing-function: ease-out;
	}
	25% {
		transform: scale(1.1);
		animation-timing-function: ease-in;
	}
	50% {
		transform: scale(1);
		animation-timing-function: ease-out;
	}
	74% {
		transform: scale(1.05);
		animation-timing-function: ease-in;
	}
	to {
		transform: scale(1);
		animation-timing-function: ease-out;
	}
}

a { display: block;}

/*make it scale from centre of text */
h3 { display: inline-block; }

h3.animated {
    -webkit-animation: pulse 0.5s;
    animation: pulse 0.5s;
    
}

body {
    padding: 50px;
}

JavaScript

$('a').on('click', function(){
    $('h3').addClass('animated').on('animationend webkitAnimationEnd', function(){
    $(this).removeClass('animated');
  });
});